<script setup>
import { useRouter } from 'vue-router';
const router = useRouter()
function onClickLeft() {
    router.back()
}
</script>


<template>
    <div class="box">
        <van-nav-bar title="消息详情" left-text="返回" left-arrow @click-left="onClickLeft" />

        <div class="content">

            <div class="top1">
                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;您有一笔预支付超额未及时处理、请于今天11:30之前往前台进行相关账单办理!
            </div>
            <div class="top2">
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2020/12/30,周五,08:30 AM
                </p>
                <p>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;尊敬的游客，您好!你有一笔预支付超额必须在当天上午9:00前在前台结算，如果您有任何疑问，请与我们联系，酒店内拨号“124”咨询。
                </p>

                <h4>
                    祝您玩的愉快！
                </h4>
            </div>
        </div>
    </div>
</template>

<style scoped>
.top1 {
    width: 90%;
    height: .8rem;
    background-color: rgba(255, 0, 0, 0.242);
    margin-left: .18rem;
    border-radius: .12rem;
    padding-left: .1rem;
    padding-right: .1rem;
    box-sizing: border-box;
    padding-top: .1rem;
    line-height: .3rem;
    margin-bottom: .1rem;
}

.top2 {
    padding-left: .3rem;
    padding-right: .1rem;
    padding-top: .1rem;

    width: 90%;
    height: 4rem;
    line-height: .3rem;
    box-sizing: border-box;
}
</style>